<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!doctype html>
<script src="js/jquery-3.5.1.min.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <title>文本动画</title>

    <style>
        body {
            background: #101;
            text-align: center;
            color: #fff;
            font-size: 32px;
            font-family: 'Roboto',Arial;
            font-weight: 300;
            color: #bbc;
        }

        div {
            position: relative;
            height: calc( 100vh - 60px);
            transform: translateY(50%);
            text-shadow: 0 0 30px cyan;
        }

        span {
            display: inline-block;
            transition: all ease 0.9s;
            opacity: 0;
            min-width: 10px;
        }
    </style>

</head>
<body>

<div id="mq">春雨里洗过的太阳</div>

<script type="text/javascript">
    function _(x) {
        return document.querySelectorAll(x);
    }

    function r(min=0,max=0) {
        return min + Math.round(Math.random() * (max-min));
    }

    //wrap each letter with <span>

    let  textarr =[
        "电饭锅电饭锅",
        "让他同意后即可回家",
        "sdf电饭锅",
        "电饭锅  ",
        "23梵蒂冈地方规划",
    ]


    let  mqs = 0

    let otta = textarr.length

    setInterval(function(){
        if(mqs<otta){

            $("#mq").html('<span>' + textarr[mqs].trim().split('').join('</span><span>') + '</span>');
            var frame = 0;



         let   dome =  setInterval(function() {
                if(frame%4==0)
                    for(var i = 0; i < _('span').length; i++)
                    {
                        _('span')[i].style.opacity = 0;
                        _('span')[i].style.color = '#' + r(2,9) + r(1,9) + r(3,9);
                        _('span')[i].style.transform = 'translate3d(' + r(-150) + 'px, ' + r(-150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
                    }

                else if(frame%4==3)
                    for(var i = 0; i < _('span').length; i++)
                    {
                        _('span')[i].style.opacity = 0;
                        _('span')[i].style.transform = 'translate3d(' + r(150) + 'px, ' + r(150) + 'px, 0px) rotate(' + r(-30,30) + 'deg)';
                    }

                else
                    for(var i = 0; i < _('span').length; i++)
                    {
                        _('span')[i].style.transform = '';
                        _('span')[i].style.opacity = 1;
                    }
                frame++;
            }, 1000);



            mqs++
        }else{
            mqs=0
        }

    },3000)


    for(let ii=0;ii<textarr.length;ii++){

    }

</script>

</body>
</html>

</body>
</html>